<template>
	<u-popup :show="show" @close="close" mode="bottom" round="10">
		<view class="payment-box">
			<view class="title">
				<view class="">选择支付方式</view>
			</view>
			<view class="payment-list">
				<view class="payment-item" v-for="(item, index) in paymentList" :key="index"
					@click="selectPayment(index)">
					<view class="left">
						<image :src="item.icon" mode="aspectFit"></image>
						<text>{{item.name}}</text>
					</view>
					<view class="flex-align-center">
						<view class="" v-if="item.type=='balance'" style="padding: 0rpx 30rpx;font-size: 28rpx;" >(余额 : ￥{{Userinfo.amount}})</view>
						<radio :checked="currentIndex === index" color="#FB243D" style="transform:scale(0.7)" />
					</view>
					
				</view>
			</view>
			<view class="price-box">
				<text>支付金额</text>
				<text class="price">¥{{price}}</text>
			</view>
			<view class="button-box">
				<view class="confirm-btn" @click="confirm">确认支付</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			price: {
				type: [Number, String],
				default: '0.00'
			},
			mini: {
				type: Boolean,
				default: true
			},
			balance: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				currentIndex: 0,
				allPaymentList: [
					{
						name: '微信小程序支付',
						icon: '/static/shop/weixin.png',
						type: 'mini',
						paytype: 1,
						showWhen: 'mini'
					},
					{
						name: '支付宝支付',
						icon: '/static/shop/alpay.png',
						type: 'alipay',
						paytype: 2,
						showWhen: 'always'
					},
					{
						name: '余额支付',
						icon: '/static/shop/balance.png',
						type: 'balance',
						paytype: 3,
						showWhen: 'balance'
					},
					{
						name: '微信APP支付',
						icon: '/static/shop/weixin.png',
						type: 'wxpay',
						paytype: 4,
						showWhen: 'app'
					}
				]
			}
		},
		computed: {
			Userinfo() {
				return this.$store.state.userinfo;
			},
			// 根据参数过滤支付选项
			paymentList() {
				return this.allPaymentList.filter(item => {
					switch (item.showWhen) {
						case 'mini':
							return this.mini; // mini: true 显示微信小程序支付
						case 'app':
							return !this.mini; // mini: false 显示微信APP支付
						case 'balance':
							return this.balance; // balance: true 显示余额支付
						case 'always':
							return !this.mini; // mini: true 时隐藏支付宝支付
						default:
							return true;
					}
				});
			}
		},
		methods: {
			close() {
				this.$emit('close')
			},
			selectPayment(index) {
				this.currentIndex = index
			},
			confirm() {
				const payment = this.paymentList[this.currentIndex]
				this.$emit('confirm', payment)
				this.close()
			}
		},
		watch: {
			// 监听支付选项变化，重置选中状态
			paymentList: {
				handler(newList) {
					if (newList.length > 0) {
						this.currentIndex = 0;
					}
				},
				immediate: true
			}
		}
	}
</script>

<style lang="scss">
	.payment-box {
		padding: 30rpx;

		.title {
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 30rpx;
		}

		.payment-list {
			.payment-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx 0;
				border-bottom: 1rpx solid #f5f5f5;

				&:last-child {
					border-bottom: none;
				}

				.left {
					display: flex;
					align-items: center;

					image {
						width: 44rpx;
						height: 44rpx;
						margin-right: 20rpx;
					}

					text {
						font-size: 30rpx;
						color: #333;
					}
				}
			}
		}

		.price-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30rpx;
			padding: 30rpx 0;
			border-top: 1rpx solid #f5f5f5;

			text {
				font-size: 30rpx;
				color: #333;

				&.price {
					color: #FB243D;
					font-size: 36rpx;
					font-weight: bold;
				}
			}
		}

		.button-box {
			margin-top: 40rpx;

			.confirm-btn {
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				background: #FB243D;
				color: #fff;
				font-size: 32rpx;
				font-weight: bold;
				border-radius: 44rpx;
			}
		}
	}
</style>